<!DOCTYPE html>
<html>
<head>
  <script src="../node_modules/angular/angular.js"></script>
  <style>
    .strike {
      text-decoration: line-through;
    }
  </style>
</head>
<body ng-app="todoApp">
  <div ng-controller="todoController">
    <input type="text" ng-model="curItem.content" ng-keyup="$event.keyCode === 13 && addItem()">
    <button ng-click="addItem()">Add</button>
    <ul>
      <li ng-repeat="item in todoList">
        <input type="checkbox" ng-model="item.checked" id="{{'id-' + $index}}">
        <label for="{{'id-' + $index}}" ng-class="{strike: item.checked}">{{ item.content }}</label>
      </li>
    </ul>
    <p>
      done: {{ todoList | doneCount }}
    </p>
  </div>
  <script>
    angular.module('todoApp', [])
      .filter('doneCount', function() {
        return function(arr) {
          return arr.filter(item => item.checked).length;
        };
      })
      .controller('todoController', function($scope) {
        $scope.curItem = { content: '', checked: false };
        $scope.todoList = [{ 
          content: 'write a doc',
          time: new Date().toLocaleString()
        }];

        $scope.addItem = function() {
          $scope.todoList.push({
            ...$scope.curItem,
            checked: false,
            time: new Date().toLocaleString()
          });
          $scope.curItem.content = ''
        }
      })
  </script>
</body>
</html>